<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="考试期次:">
          <el-input v-model="formInline.user" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="考试名称">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <div class="list">
      <div class="listone">
        <i class="el-icon-info" style="color: #339dff; margin-left: 10px"></i>
        <p style="display: inline-block">
          已选择<span style="color: #339dff">4</span
          >项&nbsp;本次查询耗时:&nbsp;364毫秒&nbsp;
        </p>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="name" label="考试期次" width="120">
        </el-table-column>
        <el-table-column prop="address" label="考试名称"> </el-table-column>
        <el-table-column label="考试时间" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="number" label="人数"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template>
            <i style="color: #339dff" @click="Out">打印签到表</i>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "2021年语文期中考试",
          address: "语文期中考试",
          number: 100,
        },
        {
          date: "2016-05-02",
          name: "2021年语文期中考试",
          address: "语文期中考试",
          number: 100,
        },
        {
          date: "2016-05-04",
          name: "2021年语文期中考试",
          address: "语文期中考试",
          number: 100,
        },
        {
          date: "2016-05-01",
          name: "2021年语文期中考试",
          address: "语文期中考试",
          number: 100,
        },
        {
          date: "2016-05-08",
          name: "2021年语文期中考试",
          address: "语文期中考试",
          number: 100,
        },
        {
          date: "2016-05-06",
          name: "2021年语文期中考试",
          address: "语文期中考试",
          number: 100,
        },
        {
          date: "2016-05-07",
          name: "2021年语文期中考试",
          address: "语文期中考试",
          number: 100,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //跳转
    Out() {
      this.$router.push({
        name: "Print",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 98%;
  margin-left: 10px;
}
.list {
  width: 100%;
  background: #ffffff;
  .listone {
    width: 90%;
    margin-left: 30px;
    border: 1px solid #caedff;
    background: #e6f7ff;
  }
}
</style>
